<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>



<script type="text/javascript">

$(document).ready(function(){

	$('#wait').hide();
	
	$("form#join").submit(function(){
		
		$("#reg_button").attr('disabled', true);
		$("#reg_button").attr('value', "Bitte warten...");	    
		
		if(checkInput() == 1){
			$("#reg_button").attr('disabled', false);
			$("#reg_button").attr('value', "Registrieren");
			return false;
		}

		$('#wait').show();
		
		$.post("register.do",{
					email: $("#email").val(),
					password: $("#password").val()
				}, function(xml) {
				handleResponse(xml);
				$("#reg_button").attr('disabled', false);
				$("#reg_button").attr('value', "Registrieren");
				$('#wait').hide();		
		});		

		return false;
	});
});


function handleResponse(xml) {
	
	main = $("main",xml).text();
	if(main != ""){
		$("#join_content").html(main);
		return;
	}
	
	$("#email_msg").empty();
	$("#email_a_msg").empty();
	$("#password_msg").empty();
	
	email = $("email",xml).text();
	email_a = $("emailAgain",xml).text();
	password = $("password",xml).text();
	
	$("#email_msg").html(email);
	$("#email_a_msg").html(email_a);
	$("#password_msg").html(password);
}

function checkInput() {

	var email = $("#email").val();
	var email_a = $("#email_a").val();
	var passord = $("#password").val();
	var error = 0;

	$("#email_msg").empty();
	$("#email_a_msg").empty();
	$("#password_msg").empty();

	if(email == ""){
		$("#email_msg").html("Deine E-Mail-Addresse ist erforderlich");
		error = 1;
	}else{
		if(email.length > 50){
			$("#email_msg").html("Zu lang. Maximal 50 Zeichen");
			error = 1;
		}else if (!checkEmail(email)){
			$("#email_msg").html("E-Mail-Addresse ist falsch");
			error = 1;			
		}	
	}
	
	if(email_a == ""){
		$("#email_a_msg").html("Bitte gib Deine E-Mail-Addresse erneut ein");
		error = 1;
	}
	
	if(error != 1){
		if(email != email_a){
			$("#email_msg").html("E-Mail-Addressen stimmen nicht &uuml;berein ");
			$("#email_a_msg").html("E-Mail-Addressen stimmen nicht &uuml;berein ");
			error = 1;
		}
	}
	if(passord == ""){
		$("#password_msg").html("Denk Dir ein Password aus");
		error = 1;
	}else{
		if(passord.length < 5){
			$("#password_msg").html("Zu kurz. Minimal 5 Zeichen");
			error = 1;
		}else if(passord.length > 20){
			$("#password_msg").html("Zu lang. Maximal 20 Zeichen");
			error = 1;
		}
	}

	return error;
}

function checkEmail(email) {
	   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	   if(reg.test(email) == false) {
	      return false;
	   }
	   return true;
	}

</script>

<div id="join_content">

<h1>Registrierung bei Playdate.de</h1>
<br />
<form id="join">

<table cellspacing="3">
	<tr>
		<td width="120px">Deine E-Mail:</td>
		<td><input id="email" name="email" type="text" class="Feld"
			maxlength="51"></td>
		<td><span style="color: red; margin-left: 5px" " id="email_msg"></span></td>
	</tr>
	<tr>
		<td>E-Mail wiederholen:</td>
		<td><input id="email_a" name="email_a" type="text" class="Feld"
			maxlength="50"></td>
		<td><span style="color: red; margin-left: 5px" " id="email_a_msg"></span></td>
	</tr>
	<tr>
		<td>Neues Passwort:</td>
		<td><input id="password" name="password" type="password"
			class="Feld" maxlength="40"></td>
		<td><span style="color: red; margin-left: 5px" id="password_msg"></span></td>
	</tr>
</table>

<br />
<input id="reg_button" type="submit" value="Registrieren" class="gwt-Button"/>

<img alt="" src="/img/ajax-loader.gif" id="wait"/>

</form>

</div>
